<div class="card-container">
  <nz-tabset nzType="card" nzCentered [nzSelectedIndex]="selectedIndex">
    <nz-tab [nzTitle]="'工作空间'">
      <nz-card nzTitle="编辑" [nzExtra]="extraTemplate">
        <nz-alert *ngIf="saveError" [nzType]="'error'" [nzMessage]="saveError" [nzShowIcon]="true" class="mb-lg" />
        <form nz-form [formGroup]="form" (ngSubmit)="submit()" se-container="1" labelWidth="180">
          <se label="工作空间名称" error="工作空间名称不能为空" required>
            <input nz-input placeholder="请输入工作空间名称" formControlName="name" />
          </se>
          <se label="显示名称" error="显示名称不能为空" required>
            <input nz-input placeholder="请输入显示名称" formControlName="label" />
          </se>
          <se>
            <button nz-button nzType="primary" [disabled]="form.invalid" type="submit" [nzLoading]="submitting">提交</button>
          </se>
        </form>
      </nz-card>
    </nz-tab>
    <nz-tab nzTitle="权限">
      <nz-card [nzTitle]="treeTitle" [nzExtra]="extraTemplate">
        <div style="margin-left: 10%; text-align: center">
          <nz-transfer
            [nzListStyle]="{ 'width.px': 400, 'height.px': 300 }"
            [nzDataSource]="translist"
            [nzTitles]="['可选用户', '已选用户']"
          />
          <button style="margin-top: 20px" nz-button nzType="primary" (click)="grantUser()">提交</button>
        </div>
      </nz-card>
    </nz-tab>
  </nz-tabset>
  <ng-template #extraTemplate>
    <button nz-button nzType="default" (click)="back()">返回</button>
  </ng-template>
</div>
